<template>
    <div class="root">
        <ul class="mui-table-view">
            <li v-for="item in message" class="mui-table-view-cell mui-media">
                <router-link :to="'/news/newsinfo/'+item.id">
                    <img class="mui-media-object mui-pull-left"
                         :src="item.img_url">

                    <div class="mui-media-body">
                        {{item.title}}
                        <p class='mui-ellipsis'>{{item.zhaiyao}}</p>
                    </div>
                    <div class="mui-media-foot">
                        <span>发布时间：{{item.add_time | datafmt("YYYYMMDD hh:mm:ss")}}</span>
                        <span class="foot-click">点击数：{{item.click}}</span>
                    </div>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        data: function () {
            return {
                message: []
            }
        },
        created: function () {
            this.getnewslist()
        }
        ,
        methods: {
            getnewslist()
    {
        let url = 'http://webhm.top:8899/api/getnewslist';
        this.$http.get(url).then(function (res) {
            if (res.body.status != 0) {
                Toast(res.body.message);
                return
            }
            this.message = res.body.message
        })
    }
    }
    }
</script>

<style scoped>
    div.root {
        margin-top: 40px;
        margin-bottom: 50px;
    }

    .mui-media-foot {
        margin-top: 1.5em;
        font-size: 14px;
        color: #0094ff;
    }

    .mui-media img {
        height: 80px;
        max-width: 80px;
    }

    .foot-click {
        margin-left: 15px;
    }
</style>